<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 400px;height: 200px;border: solid 1px black;position: relative;}
    .box p{margin: 0;position: absolute;height: 20px;background: blue;color: #fff;text-align: center;line-height: 20px;left:0;top:90px;}
  </style>
</head>
<body>
  <div class="box">
    <p></p>
  </div>
</body>
<script>

  const p = document.querySelector(".box p")
  const speed = 3;
  const target = 400;
  let t;

  document.onclick = function(){
    if(t) return;
    t = setInterval(()=>{
      if(target - p.offsetWidth < speed){
        clearInterval(t);
        p.style.width = target + "px";
        p.innerText = "100%";
      }else{
        p.style.width = p.offsetWidth + speed + "px";
        // 计算百分比
        p.innerText = (p.offsetWidth / target * 100).toFixed(2) + "%";
      }
    }, 30);
  }
  
</script>
</html>